import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import './test.js' as Jie

Window {
    id: window
    width: 640
    height: 480
    visible: true

    Item {
        id: jieItem
        anchors.fill: parent

        //通过js返回颜色，实现颜色的生成全在函数中实现，只要传入生成rgb颜色的函数即可
        property var colorBuilder: Jie.getColorFactory(Qt.rgba)

        ListView {
            id: jieList
            anchors.fill: parent
            //model: 20    //这个是直接显示20行
            //model: ['张三', '李四']    //显示两行,js的数组
            model: [
                {
                    name: '张三',
                    age: 26
                },
                {
                    name: '李四',
                    age: 30
                }
            ]
            delegate: ItemDelegate {
                width: jieList.width
                text: 'name:' + modelData.name + ' age: ' + modelData.age + (jieList.currentIndex === index ? ' √' : '')
                background: Rectangle {
                    color: jieItem.colorBuilder()
                }

                onClicked: {
                    //此处点击的时候上面text会跟着变，动态绑定
                    jieList.currentIndex = index
                    console.log(JSON.stringify(modelData))
                }
            }
            //指示器不可拖动
            //ScrollIndicator.vertical: ScrollIndicator {}
            //滚动条可拖动
            ScrollBar.vertical: ScrollBar {}

            Component.onCompleted: {
                //直接添加不行
//                jieList.model.push('王五')
//                jieList.model.forEach (
//                    function(item) {
//                        console.log(item)
//                    }
//                )

                //像这样赋值一遍才能生效
                let modelArray = jieList.model
                //modelArray.push('王五')
                modelArray.push({name:'王五', age:27})
                jieList.model = modelArray
            }
        }
    }
}
